<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="layout-vue">
<head>
    <meta charset="UTF-8">


    <th:block th:fragment="header">
        <style>
            tr.deleted1{
                color:gray;
            }
            input[type=number]{width:60px;}


        </style>
    </th:block>

</head>
<body>

<div class="container-md" id="container" th:fragment="content">
    <div id="app">

        <div class="card">

            <div class="card-header">
                <h3 class="card-title"> 问题列表 </h3>
            </div>
            <div class="card-body">
                <div>
                    紧急程度：<select v-model="selector.target.urgent">
                    <option value="">全部</option>
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
                    状态：<select v-model="selector.target.status">
                    <option value="">全部</option>
                    <option v-for="o in dictList('issue.status')" :value="o.code">{{o.code}} {{o.value}}</option>
                    <!--                    <option value="0">未发布</option>-->
                    <!--                    <option value="1">已发布</option>-->
                    <!--                    <option value="2">已认领</option>-->
                    <!--                    <option value="3">已提交</option>-->
                    <!--                    <option value="4">已完成</option>-->
                </select>
                    <button @click="selector.itookit=1">我领取的</button>
                    关键词：<input placeholder="名称" v-model="selector.keyword">
                    <button onclick="loadData()">Search</button>

                    每页<input type="number" step="1" v-model.lazy="selector.pageSize">条。
                    第<input type="number" step="1" min="1" :max="Math.ceil(total/selector.pageSize)"
                             v-model="selector.pageNo">页。
                    共<code>{{total}}</code>条，<code>{{Math.ceil(total/selector.pageSize)}}</code>页。
                </div>
                <table class="table table-hover table-bordered">
                    <tr>
                        <td>#</td>
                        <td>编号</td>
                        <td>标题</td>
                        <td>紧急</td>
                        <td>状态</td>
                        <td>任务</td>


                        <td> -</td>
                    </tr>
                    <template v-for="(issue,index) in list">
                        <tr @dblclick="issue.editing = !issue.editing">
                            <td>{{index+1}}</td>
                            <td>{{issue.no}}</td>
                            <td>{{issue.subject}}</td>
                            <td>{{issue.urgent}}</td>
                            <td>{{issue.status}}</td>
                            <td>{{issue.task}}</td>

                            <td colspan="10">
                                <a @click="takeTask(issue)">认领</a> |
                                <!--                                <a target="_blank" v-if="issue.id" :href="`/pm/issue/get?id=${issue.id}`">详情</a> |-->
                                <!--                                <a @click="issue.editing">编辑</a> |-->
<!--                                <a @click="submit(issue)">保存</a>-->
                            </td>
                        </tr>
                        <tr>
                            <td colspan="20">
                                <code>{{issue?.createdByUser?.username}}</code>创建于<code>{{new
                                Date(issue.createdAt+8*1000*3600).toISOString()}}</code>
                                <a target="_blank" v-if="issue.id" :href="`/pm/issue/get?id=${issue.id}`">详情</a>
                            </td>
                        </tr>
                        <tr v-if="issue.editing && issue.content">
                            <td colspan="20">
                                <div v-html="markdown(issue.content)">
                                </div>
                            </td>
                        </tr>
                        <tr v-if="issue.taskList">
                            <td colspan="10">
                                <template v-for="(task,ti) in issue.taskList">
                                    <code>{{task.ownerUser.username}}</code> <small class="badge badge-success"><i
                                        class="far fa-clock"></i> {{task.progress}}%</small>|
                                </template>
                            </td>
                        </tr>
                    </template>
                </table>

            </div>

            <div style="position:fixed;right:10px;bottom:10px;">
                <a class="btn btn-default" @click="newIssue()">新增纸张</a>
            </div>

        </div>
    </div>

</div>

<th:block th:fragment="footer">

    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/marked/9.0.0/marked.min.js"></script>-->
    <script src="/static/lib/editor.md/lib/marked.min.js"></script>
    <!--    <script src="/static/lib/editor.md/editormd.min.js"></script>-->
    <script>
        var rendererMD = new marked.Renderer();
            marked.setOptions({
              renderer: rendererMD,
              gfm: true,
              tables: true,
              breaks: false,
              pedantic: false,
              sanitize: false,
              smartLists: true,
              smartypants: false
            });

    </script>
    <script>

        function newPaper(){
            var paper = {
                name:'',originSize:{width:1194,height:889},maxSheet:200,padding:2
            };
            app.$data.list.push(paper);
        }
        const { createApp } = Vue;
            var app = createApp({
            data() {
              return {
                list:[], total:0,catalogList:[],
                currentIndex : -1,
                selector:{target:{},itookit:null,withTaskList:1,withPrettyActor:1,pageSize:20,pageNo:1,urgent:null,status:null}
              }
            },methods:{
                submit:function (issue){
                    var url = "/pm/issue/update";
                    axios.post(url, issue).then(function (response) {
                        console.log("response",response)
                        loadData();
                    }).catch(function (error) {
                        console.log("error",error);
                        loadData();
                    });
                },newIssue:function(){
                    var issue = {subject:"新建问题"};
                    this.list.push(issue)
                    this.submit(issue)
                },loadData:function(){
                    var selector = this.selector || {}
                    axios.post('/pm/issue/list', selector).then((response)=> {
                        console.log("response",response)
                        this.list = response.data.data||[];
                        this.total=response.data.total || 0;
                        this.catalogList=response.data.dict||[];
                    }).catch(function (error) {
                        console.log("error",error);
                    });
                },takeTask:function(issue){
                   if(!issue || !issue.id) return;
                   axios.post('/pm/issue/take?id='+issue.id, {}).then((response)=> {
                        console.log("response",response)
                        this.list = response.data.data||[];
                        this.total=response.data.total || 0;
                    }).catch(function (error) {
                        console.log("error",error);
                    });
                },markdown:function(text){
                    return marked(text);
                },dictList:function(catalog){
                    for(var i=0;i<this.catalogList?.length;i++){
                        var ca = this.catalogList[i];
                        if(ca.code == catalog){
                            return ca.dictList || [];
                        }
                    }
                    return [];
                }
             },
            watch:{
                selector:{
                    handler:function(nv,ov){
                        loadData()
                    },deep:true
                }
            }
          }).mount('#app');


        function loadData( ){
            app.loadData();
        }

        window.onload=function(){
           loadData( );
        }


    </script>
</th:block>
</body>
</html>